<template>
    <rx-dialog @handOk="handleSubmit" @cancel="cancel">
        <rx-layout v-if="!showConfView">
            <div slot="center">
                <rx-fit>
                    <div slot="toolheader" border="false" foldbtn="false">
                        <div class="table-operator">
                            <a-button type="primary" @click="addRow">{{$ti18('rxList.newBtn', '添加')}}</a-button>
                            <a-button type="danger" @click="delRow">{{$ti18('rxList.delBtn','删除')}}</a-button>
                        </div>
                    </div>
                    <rx-grid
                        ref="instColumn"
                        bordered
                        :allowRowSelect="true"
                        :showPage="false"
                        :multiSelect="true"
                        :columns="columns"
                        :dataSource="instColumns"
                    >
                    <span slot="instLabel" slot-scope="{text,record}">
                        <a-select style="width: 100%;" v-model="record.instLabel"  :options="labelOptions" allowClear/>
                    </span>
                        <span slot="columnConfs" slot-scope="{text,record,index}">
                        <a-button  @click.stop="setColumnConf(record,index)">{{i18n('list.setUp','设置')}}</a-button>
                    </span>
                    </rx-grid>
                </rx-fit>
            </div>
        </rx-layout>
        <component v-else :is="component" ref="ColumnConf" :listColumns="listColumns" :instColumn="instColumn"></component>
    </rx-dialog>
</template>

<script>
import {RxLayout,RxDialog, RxGrid,RxFit,Util} from "@lowcode/jpaas-common-lib";
import SysDicApi from "@/api/system/core/sysDic";
import ColumnConf from "./ColumnConf.vue";

export default {
    name: "InstColumn",
    props: {
        listColumns:{
            type:Array,
            default:[]
        },
        instColumnConfig:{
            type:Array,
            default:[]
        },
        layerid: {
            type: String
        },
        lydata: {
            type: Object
        },
        destroy: {
            type: Function
        },
    },
    components: {
        RxGrid,
        RxLayout,
        RxFit,
        RxDialog
    },
    data() {
        return {
            columns:[
                {title: this.$ti18('rxList.index','序号'), type: 'indexColumn', width: 40, dataIndex: 'serial', scopedSlots: {customRender: 'serial'}},
                {title: this.i18n('form.orgLabel','机构标签'), dataIndex: 'instLabel', width: 120,scopedSlots: {customRender: 'instLabel'}},
                {title: this.i18n('form.headerConfig','列头配置'), dataIndex: 'columnConfs', width: 120,scopedSlots: {customRender: 'columnConfs'}},
            ],
            //机构标签
            labelOptions:[],
            instColumns:[],
            showConfView:false,
            component:ColumnConf,
            instColumn:{},
            selectIndex:null
        }
    },
    created() {
        if(this.instColumnConfig && this.instColumnConfig.length>0){
            this.instColumns=this.instColumnConfig;
        }
        this.getLabelOptions();
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "formColumnPersonalized", key);
        },
        getLabelOptions(){
            var alias="instLabel";
            SysDicApi.getByAlias(alias).then(res=>{
                if(res){
                    for (let i = 0; i < res.length; i++) {
                        this.labelOptions.push({
                            label:res[i].name,
                            value:res[i].value
                        });
                    }
                }
            });
        },
        addRow(){
            this.instColumns.push({
                instLabel:"",
                columnConfs:[]
            });
        },
        delRow(){
            var self=this;
            this.$confirm({
                title: self.i18n('msg.delInfo','确定要删除选中的数据吗?'),
                okText: self.$ti18('rxForm.okBtn','确定'),
                cancelText: self.$ti18('rxForm.cancelBtn','取消'),
                zIndex:99999,
                onOk() {
                    self.$refs.instColumn.removeRows();
                },
                onCancel() {},
            });

        },
        setColumnConf(record,index){
            this.instColumn=record;
            this.selectIndex=index;
            this.showConfView=true;
        },
        handleSubmit(vm) {
            if(this.showConfView){
                this.instColumns[this.selectIndex].columnConfs=this.$refs.ColumnConf.getColumnConfs();
                this.showConfView=false;
                vm.loading =false ;
            }else {
                Util.closeWindow(this, "ok",this.$refs.instColumn.getData());
            }
        },
        cancel() {
            if(this.showConfView){
                this.showConfView=false;
            }else {
                Util.closeWindow(this, "cancel");
            }
        },
    },
    watch: {}
}
</script>

<style scoped>

</style>